<template>
  <div>
    <!-- 导航栏 -->
    <el-tabs v-model="tab" @tab-click="handleClick">
      <el-tab-pane
        :label="item.label"
        :name="item.type"
        v-for="(item, key) in nav"
        :key="key"
      ></el-tab-pane>
    </el-tabs>
    <!-- 表单操作 -->
    <el-form :inline="true">
      <el-form-item>
        <el-button type="success" size="mini">发布商品</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" size="mini">批量删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="up(1)">上架</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="out(0)">下架</el-button>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="title"
          placeholder="请输入搜索的内容"
          size="mini"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="info" size="mini" @click="sou">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="mini">高级搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据表格 -->
    <el-table
      :data="goodslist"
      style="width: 100%"
      border
      @selection-change="zt"
    >
      <el-table-column type="selection" width="55" value="ischeck">
      </el-table-column>
      <el-table-column prop="address" label="商品" width="180">
        <template slot-scope="scope">
          <el-image :src="scope.row.cover" />
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="实际销量" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.sale_count }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="商品状态">
        <template slot-scope="scope">
          <div>
            <span v-show="scope.row.status == 0" class="cang">仓库</span>
            <span v-show="scope.row.status == 1" class="shang">上架</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="审核状态">
        <template slot-scope="scope">
          <div>
            <span v-show="scope.row.ischeck == 2">拒绝</span>
            <span v-show="scope.row.ischeck == 1">通过</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="stock" label="总库存"> </el-table-column>
      <el-table-column prop="address" label="价格">
        <template slot-scope="scope">
          <div>￥{{ scope.row.min_price }}/￥{{ scope.row.min_oprice }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            class="del"
            @click="del1(scope.row.id)"
            >删除</el-button
          >
          <el-button size="mini" type="text" @click="bj(scope.row.id)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="changesize"
      @current-change="changepage"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import bread from "../bread/bread.vue";
export default {
  components: { bread },
  data() {
    return {
      page: 1,
      limit: 8,
      title: "",
      category_id: "",
      total: 0,
      //导航栏
      nav: [
        { label: "全部", type: "all" },
        { label: "审核中", type: "checking" },
        { label: "出售中", type: "saling" },
        { label: "已下架", type: "off" },
        { label: "库存预警", type: "min_stock" },
        { label: "回收站", type: "delete" },
      ],
      tab: "all",
      // 商品数据
      goodslist: [],
      //选中商品上下架
      ids: [],
    };
  },
  mounted() {
    this.getgoodslist();
  },
  methods: {
    //点击头部导航栏
    handleClick(data) {
      console.log(data);
      console.log(this.tab);
      this.getgoodslist();
    },
    //获取数据
    getgoodslist() {
      this.$http
        .get(
          `/admin/goods/${this.page}?limit=${this.limit}&tab=${this.tab}&title=${this.title}`
        )
        .then((res) => {
          // console.log(res);
          this.goodslist = res.data.data.list;
          console.log(this.goodslist);
          this.total = res.data.data.totalCount;
        })
        .catch((err) => {
          console.log(err.response);
        });
    },
    //分页
    changesize(size) {
      this.limit = size;
      this.getgoodslist();
    },
    changepage(page) {
      this.page = page;
      this.getgoodslist();
    },
    //选中
    zt(data) {
      // console.log(data)
      // console.log(data)
      let ids = [];
      data.forEach((item) => {
        ids.push(item.id);
      });
      this.ids = ids;
      console.log(this.ids);
    },
    //上下架
    up(status) {
      if (this.ids.length == 0) {
        this.$message.success("请选择商品");
        return false;
      }
      console.log(status);
      this.$http
        .post("/admin/goods/changestatus", { ids: this.ids, status: status })
        .then((res) => {
          console.log(res);
          this.getgoodslist();
        })
        .catch((err) => {
          console.log(err.response);
        });
    },
    out(status) {
      if (this.ids.length == 0) {
        this.$message.success("请选择商品");
        return false;
      }
      this.$http
        .post("/admin/goods/changestatus", { ids: this.ids, status: status })
        .then((res) => {
          console.log(res);
          this.getgoodslist();
        })
        .catch((err) => {
          console.log(err.response);
        });
    },
    //搜索
    sou() {
      this.getgoodslist();
    },
    //删除单个
    del1(id) {
      // alert(id)
      console.log(this.tab);
      this.$http
        .post(`/admin/goods/${id}/delete`)
        .then((res) => {
          this.$confirm("此操作将删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.getgoodslist();
            this.$message.success("删除成功");
          });
        })
        .catch((err) => {
          console.log(err.response);
        });
    },
    //编辑
    bj(id) {
      alert(id);
    },
    //批量
  },
};
</script>

<style lang='scss' scoped>
.el-image {
  width: 50px;
  height: 50px;
}
.cang {
  background: #dc3545;
  color: #fff;
  padding: 4px;
  border-radius: 10px;
}
.shang {
  background: #28a745;
  color: #fff;
  padding: 4px;
  border-radius: 10px;
}
.del {
  color: tomato;
}
</style>